export default {
    data: {
        ctx: null,
        gradient:null,
        xlen:720,
        ylen:480,
    },
    props: ['max']['min'],
    onInit(){
        this.$watch('min', 'onPropertyChange');
    },
    onPropertyChange(newW,oldW){
        console.info('alls 属性变化 ' + newW + ' ' + oldW);
        if(this.max >= newW)
        {
            this.onChange(this.max, this.min)
        }
    },
    onChange(max, min) {

        this.ondoughnutline();
        this.setLength(max,min);
        this.charss(min);
    },

    setLength(all,con){
        this.ctx.lineWidth = 38;
        this.ctx.beginPath();
        this.ctx.strokeStyle = this.gradient;
        this.ctx.arc(this.xlen/2, this.ylen/2, 200, Math.PI *1.5, Math.PI*1.5+Math.PI * con/all*2);
        this.ctx.stroke();
    },
    onLayoutReady(){

        var el = this.$refs.canvasb;
        this.ctx = el.getContext("2d",{antialias: true});
        // 清除画布上的内容
        this.gradient = this.ctx.createLinearGradient(0,0, 0,300);
        this.gradient.addColorStop(0, '#ff149ee9');
        this.gradient.addColorStop(1, '#ff9ae2ee');
        this.ondoughnutline();
        this.setLength(this.max,this.min);
        this.charss(this.min);

    },
    ondoughnutline()
    {
        this.ctx.clearRect(0, 0, this.xlen, this.ylen);
        this.ctx.lineCap = 'round';
        // 描边的宽度
        this.ctx.lineWidth = 2;
        // 创建一个新的绘制路径
        this.ctx.beginPath();
        // 路径从当前点移动到指定点
        this.ctx.strokeStyle = this.gradient;
        this.ctx.arc(this.xlen/2, this.ylen/2, 200, 0, Math.PI * 2);
        this.ctx.stroke();
    },

    charss(con)
    {
        // 创建一个新的绘制路径
        this.ctx.beginPath();
        // 路径从当前点移动到指定点
        this.ctx.fillStyle  = this.gradient;
        this.ctx.font = "150px sans-serif";
        this.ctx.fillText(con, this.xlen/2-95, this.ylen/2+35);
        this.ctx.stroke();
        this.ctx.beginPath();
        // 路径从当前点移动到指定点
        this.ctx.font = "45px sans-serif";
        this.ctx.fillText("g", this.xlen/2+70, this.ylen/2+35);
        this.ctx.stroke();

        this.ctx.beginPath();
        // 路径从当前点移动到指定点
        this.ctx.font = "35px sans-serif";
        this.ctx.fillText("今日喂食", this.xlen/2-80, this.ylen/2+90);
        this.ctx.stroke();

    }
}
